import React from 'react';
import { connect } from 'dva';
import { Layout } from 'antd';
import BaseComponent from 'components/BaseComponent';
import BannerMng from 'components/BannerMng';
import FileViewer from "react-file-viewer";

import filePath from "../docs/202103081144.docx";

const { Content } = Layout;



@connect()
export default class extends BaseComponent {
  state = {
    dataSource: [
      {title: '1', link: '/abc', file: 'https://files.vlad.studio/sequoia/joy/merry_xmas_moon/thumbs/1024x1024.jpg'},
      {title: '2', link: '/abd', file: 'https://files.vlad.studio/sequoia/joy/autumn_gradient/thumbs/1024x1024.jpg'},
      {title: '3', link: '/abe', file: 'https://files.vlad.studio/sequoia/joy/tinyliving/thumbs/1024x1024.jpg'},
      {title: '4', link: '/abf', file: 'https://files.vlad.studio/sequoia/joy/little_quetzal/thumbs/1024x1024.jpg'}
    ]
  }

  onChange = datas => {
    console.log(datas);
  }

  render() {
    const { dataSource } = this.state;

    const fileType = 'docx';

    return (
        <div>

       {/*  此处注释掉 banner
         <div>
            <Layout className="full-layout page banner-page">
              <Content>
                <BannerMng dataSource={dataSource} onChange={this.onChange} />
                <br />
                <BannerMng onChange={this.onChange} />
              </Content>
            </Layout>
          </div>*/}

          <div>
            {/* React中使用react-file-viewer，实现预览office文件预览组件 */}
            <FileViewer fileType={ fileType }   filePath={ filePath }  />
          </div>

        </div>

    );
  }
}
